{% load crispy_forms_tags %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Recording</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#div_id_symptoms2").hide(1000);
$("#div_id_symptoms_level2").hide(1000);
$("#div_id_activity_performed_during_onset_of_symptoms2").hide(1000);

$("#div_id_symptoms3").hide(1000);
$("#div_id_symptoms_level3").hide(1000);
$("#div_id_activity_performed_during_onset_of_symptoms3").hide(1000);
    $("#show").click(function(){
        $("#div_id_symptoms2").show(1000);
        $("#div_id_symptoms_level2").show(1000);
        $("#div_id_activity_performed_during_onset_of_symptoms2").show(1000);
        $("#show").click(function(){
        $("#div_id_symptoms3").show(1000);
        $("#div_id_symptoms_level3").show(1000);
        $("#div_id_activity_performed_during_onset_of_symptoms3").show(1000);
    });
    });
});
</script>
</head>
<body>


<form method="POST" action="">{% csrf_token %}

<div id="div_id_flare_up_time" class="control-group"> <label for="id_flare_up_time" class="control-label requiredField">
                Flare up time<span class="asteriskField">*</span> </label> <div class="controls"> <input class="datetimeinput" id="id_flare_up_time" name="flare_up_time" type="text" value="2017-04-16 03:10:09" required /> <input id="initial-id_flare_up_time" name="initial-flare_up_time" type="hidden" value="2017-04-16 03:10:09" /> </div> </div> <div id="div_id_symptoms" class="control-group"> <label for="id_symptoms" class="control-label requiredField">
                Symptoms<span class="asteriskField">*</span> </label> <div class="controls"> <select class="select" id="id_symptoms" name="symptoms" required>
<option value="" selected="selected">---------</option>
<option value="Light_sensitivity">light sensitivity</option>
<option value="Headache">headache</option>
<option value="Dizziness">dizziness</option>
<option value="Blurry_vision">blurry vision</option>
<option value="Increased_difficulty_concentrating">increased difficulty concentrating</option>
<option value="Others">others</option>
</select> </div> </div> <div id="div_id_symptoms_level" class="control-group"> <label for="id_symptoms_level" class="control-label requiredField">
                Symptoms level<span class="asteriskField">*</span> </label> <div class="controls"> <select class="select" id="id_symptoms_level" name="symptoms_level" required>
<option value="" selected="selected">---------</option>
<option value="Mile">mild</option>
<option value="Moderate">moderate</option>
<option value="Severe">severe</option>
</select> </div> </div> <div id="div_id_activity_performed_during_onset_of_symptoms" class="control-group"> <label for="id_activity_performed_during_onset_of_symptoms" class="control-label requiredField">
                Activity performed during onset of symptoms<span class="asteriskField">*</span> </label> <div class="controls"> <select class="select" id="id_activity_performed_during_onset_of_symptoms" name="activity_performed_during_onset_of_symptoms" required>
<option value="" selected="selected">---------</option>
<option value="reading for leisure (specify book, magazine, newspaper)">reading for leisure (specify book, magazine, newspaper)</option>
<option value="computer Work (browsing internet, research)">computer Work (browsing internet, research)</option>
<option value="use of tablet or smart phone">use of tablet or smart phone</option>
<option value="studying">studying</option>
<option value="paying bills">paying bills</option>
<option value="eating in a restaurant">eating in a restaurant</option>
<option value="taking public transportation">taking public transportation</option>
<option value="going to the movies or theater">going to the movies or theater</option>
<option value="attending a sporting event">attending a sporting event</option>
<option value="attending religious service">attending religious service</option>
<option value="work related task (please specify)">work related task (please specify)</option>
<option value="physical exertion or exercise">physical exertion or exercise</option>
<option value="laundry">laundry</option>
<option value="cleaning">cleaning</option>
<option value="cooking">cooking</option>
<option value="Others">others</option>
</select> </div> </div>

    <div id="div_id_symptoms2" class="control-group"> <label for="id_symptoms2" class="control-label ">
                Symptoms2
            </label> <div class="controls"> <select class="select" id="id_symptoms2" name="symptoms2">
<option value="" selected="selected">---------</option>
<option value="Light_sensitivity">light sensitivity</option>
<option value="Headache">headache</option>
<option value="Dizziness">dizziness</option>
<option value="Blurry_vision">blurry vision</option>
<option value="Increased_difficulty_concentrating">increased difficulty concentrating</option>
<option value="Others">others</option>
</select> </div> </div> <div id="div_id_symptoms_level2" class="control-group"> <label for="id_symptoms_level2" class="control-label ">
                Symptoms level2
            </label> <div class="controls"> <select class="select" id="id_symptoms_level2" name="symptoms_level2">
<option value="" selected="selected">---------</option>
<option value="Mile">mild</option>
<option value="Moderate">moderate</option>
<option value="Severe">severe</option>
</select> </div> </div> <div id="div_id_activity_performed_during_onset_of_symptoms2" class="control-group"> <label for="id_activity_performed_during_onset_of_symptoms2" class="control-label ">
                Activity performed during onset of symptoms2
            </label> <div class="controls"> <select class="select" id="id_activity_performed_during_onset_of_symptoms2" name="activity_performed_during_onset_of_symptoms2">
<option value="" selected="selected">---------</option>
<option value="reading for leisure (specify book, magazine, newspaper)">reading for leisure (specify book, magazine, newspaper)</option>
<option value="computer Work (browsing internet, research)">computer Work (browsing internet, research)</option>
<option value="use of tablet or smart phone">use of tablet or smart phone</option>
<option value="studying">studying</option>
<option value="paying bills">paying bills</option>
<option value="eating in a restaurant">eating in a restaurant</option>
<option value="taking public transportation">taking public transportation</option>
<option value="going to the movies or theater">going to the movies or theater</option>
<option value="attending a sporting event">attending a sporting event</option>
<option value="attending religious service">attending religious service</option>
<option value="work related task (please specify)">work related task (please specify)</option>
<option value="physical exertion or exercise">physical exertion or exercise</option>
<option value="laundry">laundry</option>
<option value="cleaning">cleaning</option>
<option value="cooking">cooking</option>
<option value="Others">others</option>
</select> </div> </div> <div id="div_id_symptoms3" class="control-group"> <label for="id_symptoms3" class="control-label ">
                Symptoms3
            </label> <div class="controls"> <select class="select" id="id_symptoms3" name="symptoms3">
<option value="" selected="selected">---------</option>
<option value="Light_sensitivity">light sensitivity</option>
<option value="Headache">headache</option>
<option value="Dizziness">dizziness</option>
<option value="Blurry_vision">blurry vision</option>
<option value="Increased_difficulty_concentrating">increased difficulty concentrating</option>
<option value="Others">others</option>
</select> </div> </div> <div id="div_id_symptoms_level3" class="control-group"> <label for="id_symptoms_level3" class="control-label ">
                Symptoms level3
            </label> <div class="controls"> <select class="select" id="id_symptoms_level3" name="symptoms_level3">
<option value="" selected="selected">---------</option>
<option value="Mile">mild</option>
<option value="Moderate">moderate</option>
<option value="Severe">severe</option>
</select> </div> </div> <div id="div_id_activity_performed_during_onset_of_symptoms3" class="control-group"> <label for="id_activity_performed_during_onset_of_symptoms3" class="control-label ">
                Activity performed during onset of symptoms3
            </label> <div class="controls"> <select class="select" id="id_activity_performed_during_onset_of_symptoms3" name="activity_performed_during_onset_of_symptoms3">
<option value="" selected="selected">---------</option>
<option value="reading for leisure (specify book, magazine, newspaper)">reading for leisure (specify book, magazine, newspaper)</option>
<option value="computer Work (browsing internet, research)">computer Work (browsing internet, research)</option>
<option value="use of tablet or smart phone">use of tablet or smart phone</option>
<option value="studying">studying</option>
<option value="paying bills">paying bills</option>
<option value="eating in a restaurant">eating in a restaurant</option>
<option value="taking public transportation">taking public transportation</option>
<option value="going to the movies or theater">going to the movies or theater</option>
<option value="attending a sporting event">attending a sporting event</option>
<option value="attending religious service">attending religious service</option>
<option value="work related task (please specify)">work related task (please specify)</option>
<option value="physical exertion or exercise">physical exertion or exercise</option>
<option value="laundry">laundry</option>
<option value="cleaning">cleaning</option>
<option value="cooking">cooking</option>
<option value="Others">others</option>
</select> </div> </div> <div id="div_id_optional_description" class="control-group"> <label for="id_optional_description" class="control-label ">
                Optional description
            </label> <div class="controls"> <input class="textinput textInput" id="id_optional_description" maxlength="500" name="optional_description" type="text" /> </div> </div>

<input type='submit' value="submit">
</form>
<button id="show"> + One more recorder </button>
</body>
</html>